<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="game"></div>
    <p><b>Draggable</b></p>
    <script src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
    <script>
        Crafty.init(600, 300, document.getElementById('game'));
        Crafty.background('rgb(127,127,127)');
        
        Crafty.c('DragDebug', {
          init: function() {
            this.requires('Draggable');
            this.bind("StartDrag", function(e) {
                console.log("StartDrag", e.realX, e.realY);
              }).bind("Dragging", function(e) {
                console.log("Dragging", e.realX, e.realY);
              }).bind("StopDrag", function(e) {
                console.log("StopDrag", e.realX, e.realY);
              });
          }
        });

        var frames = 0;
        var stop = function() {
          frames++;
          if (frames >= 100) {
            this.stopDrag();
            this.unbind("EnterFrame", stop);
          }
        }
        var start = function() {
          if (Crafty.lastEvent) {
            this.startDrag();
            this.unbind("EnterFrame", start);
            this.bind("EnterFrame", stop);
          }
        };

        Crafty.e('2D, Canvas, Color, DragDebug')
              .attr({x: 100, y: 50, w: 50, h: 50})
              .color('rgb(255,140,0)')
              .enableDrag()
              .bind("EnterFrame", start);

        Crafty.e('2D, Canvas, Color, DragDebug')
              .attr({x: 200, y: 50, w: 50, h: 50})
              .color('rgb(112, 175, 219)')
              .disableDrag();
    </script>
  </body>
</html>
